<script setup lang="ts">
import {articleContent} from "@/http/home";
import {useRoute} from "vue-router";


// 接收跳转传参
const route = useRoute()
const id = route.query.id

articleContent({pageSize:1,pageNum:5,teacherId:id}).then(res=>{
    console.log(res)
})


</script>

<template>
    <div class="text">
        <div class="each">
            <div class="pic">
                <img src="https://img0.baidu.com/it/u=173463650,201747414&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1709744400&t=1e2595257f8eb79b3b61bbcad7b1ff1c"
                     alt="文章封面">
            </div>
            <div class="recommend">
                <h3>关注心理健康，做好居家调适</h3>
                <div class="hot"><van-icon name="fire-o" />
                    <span>168人已读</span></div>
                <div class="time"><van-icon name="clock-o" />
                    <span>2023-03-20</span><span>08:15</span></div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="less">
.each {
    width: 92%;
    margin: 20px auto;
    display: flex;
    justify-content: space-between;

    .pic {
        width: 34%;
        height: 12vh;

        img {
            width: 100%;
            height: 100%;
            border-radius: 15px;
        }
    }
    .recommend {
        width: 62%;
        h3 {
            margin: 0 0 3vh;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .hot,.time {
            color: darkgray;
            font-weight: 600;
            span {
                margin-right: 8px;
            }
        }
    }
}
</style>